<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
  <caption>个人信息</caption>
  <tr>
    <td>照片:</td>
    <td id="head_td"></td>
  </tr>
  <tr>
  <td>名字:</td>
  <td id="name_td"></td>
  </tr>
  <tr>
    <td>年龄:</td>
    <td id="age_td"></td>
  </tr>
  <tr>
    <td>好友:</td>
    <td id="friend_td"></td>
  </tr>
</table>

<input type="button" value="请求数据" onclick="f()">

<script>
  function f(){
    //模拟数据是从服务器请求回来的
    let person={name:"苍老师",age:18,
      url:"../day04/a.jpg",friends:["传奇","克晶","程恒"]}
    //创建图片标签 显示person对象里面url对应的图片 把图片标签添加到head_td里面
    let img = document.createElement("img");
    img.src = person.url;
    //let head_td=document.querySelector("#head_td")
    head_td.append(img);
    name_td.innerText=person.name;
    age_td.innerText=person.age;
    let ul=document.createElement("ul");
    for(let friend of person.friends){
      let li=document.createElement("li");
      li.innerText=friend;
      ul.append(li)
    }
    friend_td.append(ul);
  }
</script>
</body>
</html>